<template>
  <div class="register">
    <div class="container" style="position:relative;">
      <nav>
        <div class="left">
          <ul>
            <router-link tag="li" to="/">首页</router-link>
            <router-link tag="li" to="/info">展会信息</router-link>
            <router-link tag="li" to="/consult">展会资讯</router-link>
            <router-link tag="li" to="/server">展会服务</router-link>
            <router-link tag="li" to="/exhibitionCenter">会展中心</router-link>
          </ul>
        </div>
        <div class="right">
          <ul>
            <router-link tag="li" to="/register">注册</router-link>
            <router-link tag="li" to="/login">登录</router-link>
          </ul>
        </div>
      </nav>
      <div class="middle">
        <div class="left">
          <h3>一站式全方位服务</h3>
          <p>涉及的行业有五金汽配、建材、食品、机械等领域展会为从事进出口贸易的企业提供国内外全方位的参展及延伸服务。</p>
        </div>
        <div class="register-form">
          <div class="register-tab register-tab-l">
            <a href="#">买家注册</a>
          </div>
          <div class="register-tab register-tab-r">
            <a href="#">参展商注册</a>
          </div>
          <div class="register-box">
            <div class="form">
              <div class="item item-fore1">
                <input
                  type="text"
                  name="registername"
                  v-model="registerForm.registername"
                  value
                  placeholder="请输入账号"
                />
              </div>
              <div class="item item-fore2">
                <input
                  type="password"
                  name="registerpwd"
                  v-model="registerForm.registerpwd"
                  value
                  placeholder="请输入密码"
                />
              </div>
              <div class="item item-fore3">
                <input type="text" name="Verification" v-model="code" value placeholder="请输入验证码" />
              </div>
              <div class="item item-fore4" style="text-align: left;">
                <span>
                  注册即同意
                  <a href="#">《用户使用协议》</a>
                </span>
              </div>
              <div class="item item-fore5">
                <div class="register-btn">
                  <button @click="register">立即注册</button>
                </div>
              </div>
            </div>
          </div>
          <div class="register-links">
            <a href="login" style="float:left;">立即登录</a>
            <a href="#" style="float:right;">重置密码</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapMutations } from 'vuex';
export default {
  name: "register",
  data() {
    return {
      registerForm: {
        registername: "",
        registerpwd: "",
        code: ""
      }
    };
  },
  created() {},
  computed: {},
  methods: {
    // ...mapMutations(['changeLogin']),
    register() {
      // let_this = this;
      // if (this.loginForm.loginname === '' || this.loginForm.loginpwd === '') {
      //   alert('账号或密码不能为空');
      // } else {
      //   this.axios ({
      //     method: 'post',
      //     url: 'user/login',
      //     data: _this.loginForm
      //   }).then(res => {
      //     console.log(res,data);
      //      _this.userToken = 'Bearer ' + res.data.data.body.token;
      //      // 将用户token保存到vuex中
      //     _this.changeLogin({ Authorization: _this.userToken });
      //     _this.$router.push('/home');
      //     alert('登陆成功');
      //   }).catch(error => {
      //     alert('账号或密码错误');
      //     console.log(error);
      //   });
      // }
    }
  },
  components: {
    // HelloWorld
  }
};
</script>
<style lang="less" scoped>
.register {
  height: 100%;
  width: 100%;
  background: url("../assets/background.jpg");
  background-size: 100% 100%;
  position: fixed;
  color: #ffffff;
  .container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    nav {
      width: 1200px;
      height: 100px;
      margin: 0 auto;
      position: relative;
      // display: flex;
      z-index: 1;
      .left,
      .right {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
      }
      ul li {
        display: inline;
        margin-right: 50px;
        color: #ffffff;
        font-size: 26px;
        cursor: pointer;
      }
      .left {
        margin-left: 20px;
      }
      .right {
        right: 0;
        margin-right: 0;
        ul li {
          margin-right: 10px;
        }
      }
    }
    .middle {
      overflow: hidden;
      position: absolute;
      width: 1200px;
      z-index: 1;
      top: 50%;
      margin-top: -180px;
      left: 50%;
      margin-left: -600px;
      .left {
        width: 600px;
        position: absolute;
        top: 50%;
        margin-top: -36px;
        h3 {
          font-size: 50px;
          font-weight: bold;
        }
        p {
          width: 340px;
          padding: 20px;
          // margin-top: 20px;
          font-size: 16px;
          line-height: 20px;
          margin: 20px auto;
        }
      }
      .register-form {
        width: 420px;
        height: 454px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 10px;
        float: right;
        .register-tab {
          font-size: 26px;
          margin-top: 30px;
          a {
            color: #ffffff;
          }
        }
        .register-tab-l {
          float: left;
          margin-left: 40px;
        }
        .register-tab-r {
          float: right;
          margin-right: 40px;
        }
        .register-box {
          .form {
            width: 340px;
            height: 270px;
            margin: 90px auto 0;
            .item {
              input {
                height: 34px;
                width: 300px;
                background: #ffffff;
                border-radius: 6px;
                outline-style: none;
                font-size: 18px;
                color: #918f8f;
                padding: 10px;
                margin: 10px;
              }
              span {
                margin-left: 10px;
                a {
                  color: red;
                }
              }
              .register-btn {
                height: 34px;
                width: 96%;
                padding: 6px;
                background: red;
                // font-size: 40px;
                // font-weight: bold;
                border-radius: 4px;
                margin: 20px 0 0 10px;
                position: relative;
                button {
                  width: 100%;
                  height: 100%;
                  outline: none;
                  background-color: transparent;
                  border: none;
                  font-size: 20px;
                  color: white;
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                }
              }
            }
          }
        }
        .register-links {
          width: 80%;
          height: 34px;
          margin: 44px 0 0 40px;
          padding: 10px;
          a {
            color: white;
          }
          a:last-child {
            float: right;
          }
        }
      }
    }
  }
  // .container::before {
  //   background: url("../assets/images/background.jpg");
  //   background-size: 100% 100%;
  //   position: absolute;
  //   z-index: -1;
  //   width: 100%;
  //   height: 100%;
  //   content: "";
  //   left: 0;
  //   top: 0;
  // }
  .container::after {
    position: absolute;
    z-index: 0;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    content: "";
    background-color: rgba(0, 0, 0, 0.1);
  }
}
</style>
